<template>
    <my-card style="width: 254px;height: 308px;padding: 30px 0 0 0;">
        <div style="padding:0 30px;">
            <div style="font-size: 18px;font-weight: 500" class="text-overflow">
                测试
            </div>
        </div>
        <div style="flex:1;padding:0 30px 30px 30px;display: flex;flex-direction: column;justify-content: space-between;margin-top: 8px;">
            <div class="text-overflow-3" style="font-size: 14px;color: #9EA0A5;">
                CSS样式实现溢出超出DIV边框宽度高度的内容自动隐藏方法平时我们布局时候，文字内容多了即有的文字内容多了即可文字内容多了即45646545646546dshjkdshjhjkdksah
            </div>
            <div>
                <div style="font-size: 14px;margin-bottom: 10px;color: #9EA0A5">进度</div>
                <div style="display: flex;justify-content: space-between">
                    <div style="background: #1F6FE5;height: 4px;width: 100%;border-radius: 2px"></div>
                    <div style="margin: 0 10px;background: #1F6FE5;height: 4px;width: 100%;border-radius: 2px"></div>
                    <div style="background: #E6E7E8;height: 4px;width: 100%;border-radius: 2px;opacity: 0.5"></div>
                </div>
            </div>
        </div>
        <div style="padding:0 30px;border-top: 1px solid #EAEDF3;height: 69px">
            <div style="height:69px;flex: 1;display: flex;flex-direction: row;align-items:center;">
                <div style="width: 38px;height: 38px;background: #1F6FE5;border-radius: 50%"></div>
                <div style="width: 38px;height: 38px;background: #2D9C3C;border-radius: 50%;margin-left: 10px"></div>
                <div style="width: 38px;height: 38px;border:1px solid #1F6FE5;margin-left: 10px;position: relative;border-radius: 50%">
                    <div style="font-size: 14px;color: #1F6FE5;position: absolute;left: 10.56px;top:8.5px">+8</div>
                </div>
                <div style="flex: 1"></div>
                <a-icon type="setting" style="font-size: 20px;color: #9EA0A5" @click="goFormList"/>
            </div>
        </div>
    </my-card>
</template>

<script>
    export default {
        name: 'EventBigCard',
        methods: {
            goFormList () {
                this.$router.push('/formList');
            },
        },
    };
</script>

<style scoped>
    .text-overflow {
        height: min-content;
        text-overflow: ellipsis;
        display: -webkit-box;
        word-break: break-all;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
    }

    .text-overflow-3 {
        height: min-content;
        text-overflow: ellipsis;
        display: -webkit-box;
        word-break: break-all;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 3;
        overflow: hidden;
    }
</style>
